<template>
  <div class="painting">

    <!-- 头部 -->
    <div class="top">
      <div class="container clearfix">
        <!-- 左边大图标logo -->
        <router-link to="/home" tag="div" class="left fl">
          <i></i>
        </router-link>
        
        <!-- 中间小程序和微博 -->
        <div class="center fl">
          <ul class="clearfix">
            <li class="icon1">
              <i></i>
              小程序
            </li>
            <li>微博</li>
          </ul>
        </div>

        <!-- 右边登录和注册 -->
        <div class="right fr " v-if="ifshow">
          <ul class="clearfix">
            <li class="icon1">
              <i></i>
              <router-link to="/login"><h5>登录</h5></router-link> 
            </li>
            <li>注册</li>  
          </ul>
        </div>

        <!-- 登陆后显示 -->
        <div class="head fr clearfix" v-if="!ifshow">
            <!-- 搜索图标 -->
            <div class="search fl">
                <i></i>
            </div>
            <!-- 信息图标 -->
            <div class="message fl">
                <i></i>
                <h6>0</h6>
            </div>
            <!-- 提醒图标 -->
            <div class="waring fl">
                <i></i>
                <h6>0</h6>
            </div>
            <!-- 声音图标 -->
            <div class="music fl">
                <i></i>
                <h6>0</h6>
            </div>
            <!-- 头像 -->
            <div class="headers fl">
                <el-dropdown @command="mytype">
                    <span class="el-dropdown-link">
                      <span></span><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown"  >
                      <el-dropdown-item command="1">个人中心</el-dropdown-item>
                      <el-dropdown-item command="2">我的作品</el-dropdown-item>
                      <el-dropdown-item command="3">我的点赞</el-dropdown-item>
                      <el-dropdown-item command="5">粉丝管理</el-dropdown-item>
                      <el-dropdown-item command="6" divided style="color:red">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

        </div>
      </div>
    </div>


  </div>
</template>

<script>
import {getJsonData} from "../api/home.js"
export default {
    data() {
        return {
            slot:null,
            lists: null,
            ifshow:true,
            index:1
        };
    },

    methods:{

        mytype(command){
            if(command==6){
                this.$router.push("home")
                this.ifshow=true
                // localStorage.clear() 
                localStorage.removeItem("userId")
            }else{
                this.index=command
                this.$router.push({path:"my",query:{command}})
                this.$emit("changetabs",command)
                // console.log(command);
                // console.log("1111");
            }
        }
      
    },
    created(){
        //获得文字数据
         getJsonData().then((data) => {
        // console.log(data.lists[0].title);
        this.lists = data.lists;

        //获得local数据
        let token = window.localStorage.getItem("userId");
        
        //判断是否登录
        if(!token){
            // console.log("1");
            this.ifshow=true
        }else{
            // console.log("2");
            this.ifshow=false
        }
    });

    }
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";
.container{
     background-color: #000000;
}
.painting{
width: 100%;
    background-color: #000000;

.top {
    width: 100%;
    background-color: #000000;
}

.top .left {
    padding: 7px 0px;
}

.top .left i {
    display: block;
    background-image: url(../assets/img/smlogo/painting2.png);
    background-repeat: no-repeat;
    width: 161px;
    height: 40px;
    background-size: 161px 40px;
}
.top .center {
    margin-left: 42px;
}

.top .center ul {
    height: 56px;
    line-height: 56px;
}

.top .center ul li {
    float: left;
    font-size: 12px;
    color: #b6b6b6;
    margin: 0px 14px;
    position: relative;
}

.top .center ul li::after {
    display: block;
    content: "";
    width: 1px;
    height: 9px;
    background-color: #898989;
    position: absolute;
    right: -14px;
    top: 0px;
    bottom: 0px;
    margin: auto 0px;

}

.top .center ul li:nth-child(2):after {
    background-color: #000000;
}

.top .center ul li>i {
    display: block;
    background-image: url(../assets/img/smlogo/phone.png);
    background-repeat: no-repeat;
    background-size: 10px 13px;
    width: 10px;
    height: 13px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0px;
    left: -15px;
}

.top .center ul li.icon1 h5{
    color: #f9f3f8;
    font-weight: 400;
}




.top .right {
    margin-left: 42px;
}

.top .right ul {
    height: 56px;
    line-height: 56px;
}

.top .right ul li{
    float: left;
    font-size: 12px;
    color: #ffffff;
    margin: 0px 14px;
    position: relative;
}
.top .right ul li h5{
    float: left;
    font-size: 12px;
    color: #ffffff;
    margin: 0px 14px;
    position: relative;
}

.top .right ul li::after {
    display: block;
    content: "";
    width: 1px;
    height: 9px;
    background-color: #898989;
    position: absolute;
    right: -14px;
    top: 0px;
    bottom: 0px;
    margin: auto 0px;

}

.top .right ul li:nth-child(2):after {
    background-color: #000000;
}

.top .right ul li>i {
    display: block;
    background-image: url(../assets/img/smlogo/searchtop.png);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 0px;
    left: -27px;
}

.top .right ul li.icon1 {
    color: #f9f3f8;
    font-weight: 400;
}

}

.head{
    color: #ffffff;
    padding-top: 18px ;
    .search{
        i{  
            display: block;
            background-image: url(../assets/img/smlogo/searchtop.png);
            width: 18px;
            height: 19px;
            background-size: 18px 19px;
            margin: 0px 10px;
        }
    }
    .message{
        position: relative;
        margin: 0px 15px;
        i{
            display: block;
            background-image: url(../assets/img/smlogo/message_icon.png);
            width: 18px;
            height: 18px;
            background-size: 18px 18px;
        }
        h6{
            color: #fff;
            position: absolute;
            top: -10px;
            left: 20px;
            background-color: #807f7d;
            padding:0px 5px;
            border-radius: 50%;
        }
    }
    .waring{
        position: relative;
        margin: 0px 15px;
        i{
            display: block;
            background-image: url(../assets/img/smlogo/notify_icon.png);
            width: 18px;
            height: 18px;
            background-size: 18px 18px;
        }
        h6{
            color: #fff;
            position: absolute;
            top: -10px;
            left: 20px;
            background-color: #807f7d;
            padding:0px 5px;
            border-radius: 50%;
        }
    }
    .music{
        position: relative;
        margin: 0px 15px;
        i{
            display: block;
            background-image: url(../assets/img/smlogo/xitong_icon.png);
            width: 18px;
            height: 18px;
            background-size: 18px 18px;
        }
        h6{
            color: #fff;
            position: absolute;
            top: -10px;
            left: 20px;
            background-color: #807f7d;
            padding:0px 5px;
            border-radius: 50%;
        }
    }
}
.el-dropdown-link {
    cursor: pointer;
    position: relative;
    
    span{
        display: block;
        margin-top: -5px;
        margin-left: 15px;
        margin-right: 15px;
        background-image: url(../assets/img/head/tigle.jpg);
        background-size: 28px 28px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }
  }
  .el-icon-arrow-down {
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    right: -4px;
    top: 5px;
  }
</style>